<template>
  <div class="con">
    <div class="statistics" v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0.1)">
      <ul class="statistics_box clearfix" v-if="!isShowSet">
        <li>
          <p class="titt">工地</p>
          <p class="num">
            <animate-number
                from="0"
                :to="(form.place||0)*1"
                :key="(form.place||0)*1"
                style="padding-left: 8px"
            ></animate-number>
          </p>
        </li>
        <li>
          <p class="titt">在施工</p>
          <p class="num">
            <animate-number
                from="0"
                :to="(form.ongoing||0)*1"
                :key="(form.ongoing||0)*1"
                style="padding-left: 8px"
            ></animate-number>
          </p>
        </li>
        <li>
          <p class="titt">已完工 </p>
          <p class="num">
            <animate-number
                from="0"
                :to="(form.end||0)*1"
                :key="(form.end||0)*1"
                style="padding-left: 8px"
            ></animate-number>
          </p>
        </li>
      </ul>
      <div class="statistics_box editBox" style="width: 100%" v-else>
        <span @click="dialogVisible = true">编辑</span>
      </div>
    </div>
    <div class="mapDiv">
      <mapComponents :isShowSet="isShowSet"></mapComponents>
    </div>
    <el-dialog title="栏目设置"
               :close-on-click-modal="false"
               :visible.sync="dialogVisible" id="dialogBox" v-loading="loading">
      <el-form ref="form" :model="editFrom" label-width="80px">
        <el-form-item label="工地：">
          <el-input
              v-model="editFrom.place"
              class="inputDiv"
          ></el-input>
        </el-form-item>
        <el-form-item label="在施工：">
          <el-input
              v-model="editFrom.ongoing"
              class="inputDiv"
          ></el-input>
        </el-form-item>
        <el-form-item label="已完工：">
          <el-input
              v-model="editFrom.end"
              class="inputDiv"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button type="text" @click="dialogVisible = false">取消</el-button>
       <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
       <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mapComponents from "./map";
import {constructionRequest, SCREEN_CODE} from "@/utils/http/request";

export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {},
      editFrom: {}
    };
  },
  props: ["isShowSet"],
  components: {
    mapComponents,
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.editFrom = {...this.form}
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true;
      constructionRequest.GetNum({
        datatype: 'null',
        screenCode: SCREEN_CODE.construction,
      }).then((res) => {
        if (res.code === "01") {
          this.form = {
            ...res,
          };
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    submit(val) {

      this.loading = true
      constructionRequest.NumEdit({
        ...this.editFrom,
        screenCode: SCREEN_CODE.construction,
        datatype:'0'
      }).then((res) => {
        if (res.code === "01") {
          this.$message.success(res.msg || "修改成功");
          this.getData();
          this.dialogVisible = false;
          if (val === 2) {
            this.$emit("func1", false); //向父组件传值
          }
        }
      }).catch(() => {
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100%;
  font-size: 12px;

  .statistics {
    height: 180px;
    margin-top: -50px;

    .statistics_box {
      height: 100%;
      width: 95%;
      display: flex;
      justify-content: center;

      li {
        overflow: hidden;
        width: 182px;
        text-align: center;
        margin-left: 52px;

        .titt {
          color: #42ddff;
          font-size: 42px;
          margin-bottom: 10px;
          font-weight: bold;
          height: 60px;
          overflow: hidden;
        }

        .num {
          background: #132934;
          line-height: 70px;
          border: 3px solid #2a6c84;
          border-top: none;
          color: #fdf0a8;
          font-size: 50px;
          font-weight: bold;
          letter-spacing: 6px;
        }
      }
    }
  }

  .mapDiv {
    height: calc(100% - 128px);
    position: relative;

  }

  .editBox {
    background: #384768;
    border: 1px solid #67b1ea;
    color: #6ef7ff;
    font-size: 20px;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    justify-content: center;

    span {
      cursor: pointer;
    }
  }
}
</style>
